<template>
	<view class="w-picker-view">
		<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
			<picker-view-column>
				<view class="w-picker-item" v-for="(item, index) in range.hours" :key="index">{{ item.label }}时</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pickVal: [],
			range: {},
			checkObj: {}
		};
	},
	props: {
		itemHeight: {
			type: String,
			default: '44px'
		},
		value: {
			type: [String, Array, Number],
			default: ''
		},
		current: {
			//是否默认选中当前日期
			type: Boolean,
			default: false
		},
		expand: {
			type: [Number, String],
			default: 7
		}
	},
	watch: {
		value(val) {
			this.initData();
		}
	},
	created() {
		this.initData();
	},
	methods: {
		formatNum(n) {
			return Number(n) < 10 ? '0' + Number(n) : Number(n) + '';
		},
		checkValue(value) {
			let strReg = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}(:\d{2})?$/,
				example = '2019-12-12 18:05:00或者2019-12-12 18:05';
			if (!strReg.test(value)) {
				console.log(new Error('请传入与mode、fields匹配的value值，例value=' + example + ''));
			}
			return strReg.test(value);
		},
		resetData(year, month, day) {
			let curDate = this.getCurrenDate();
			let curFlag = this.current;
			let curYear = curDate.curYear;
			let curMonth = curDate.curMonth;
			let curDay = curDate.curDay;
			let curHour = curDate.curHour;
			let months = [],
				days = [],
				sections = [];
			let disabledAfter = this.disabledAfter;
			let monthsLen = disabledAfter ? (year * 1 < curYear ? 12 : curMonth) : 12;
			let totalDays = new Date(year, month, 0).getDate(); //计算当月有几天;
			for (let month = 1; month <= monthsLen; month++) {
				months.push(this.formatNum(month));
			}
			for (let day = 1; day <= daysLen; day++) {
				days.push(this.formatNum(day));
			}
			return {
				months,
				days,
				sections
			};
		},
		getData(dVal) {
			//用来处理初始化数据
			let curFlag = this.current;
			let disabledAfter = this.disabledAfter;
			let dates = [],
				years = [],
				months = [],
				days = [],
				hours = [];
			let curDate = new Date();
			let curYear = curDate.getFullYear();
			let curMonth = curDate.getMonth();
			let curDay = curDate.getDate();
			let aDate = new Date(curYear, curMonth, curDay);
			for (let i = 0; i < this.expand * 1; i++) {
				aDate = new Date(curYear, curMonth, curDay + i);
				let year = aDate.getFullYear();
				let month = aDate.getMonth() + 1;
				let day = aDate.getDate();
				let label = year + '-' + this.formatNum(month) + '-' + this.formatNum(day);
				dates.push({
					label: label,
					value: year + '-' + this.formatNum(month) + '-' + this.formatNum(day)
				});
				if (i - 1 >= 0) {
					let n = years.length;
					let m = months.length;
					if (years[n - 1].label != year) {
						years.push({
							label: year,
							value: year
						});
					}
					if (months[m - 1].label != month) {
						months.push({
							label: month,
							value: this.formatNum(month)
						});
					}
				} else {
					years.push({
						label: year,
						value: year
					});
					months.push({
						label: month,
						value: this.formatNum(month)
					});
				}
				days.push({
					label: this.formatNum(day),
					value: this.formatNum(day)
				});
			}
			for (let i = 0; i < 24; i++) {
				hours.push({
					label: this.formatNum(i),
					value: this.formatNum(i)
				});
			}
			return {
				dates,
				years,
				months,
				days,
				hours
			};
		},
		getDefaultDate() {
			let value = this.value;
			let reg = /-/g;
			let defaultDate = value ? new Date(value.replace(reg, '/')) : new Date();
			let defaultYear = defaultDate.getFullYear();
			let defaultMonth = defaultDate.getMonth() + 1;
			let defaultDay = defaultDate.getDate();
			let defaultDays = new Date(defaultYear, defaultMonth, 0).getDate() * 1;
			return {
				defaultDate,
				defaultYear,
				defaultMonth,
				defaultDay,
				defaultDays
			};
		},
		getDval() {
			let value = this.value;
			let aDate = new Date();
			let year = this.formatNum(aDate.getFullYear());
			let month = this.formatNum(aDate.getMonth() + 1);
			let day = this.formatNum(aDate.getDate());
			let hour = aDate.getHours() + 2;
			let dVal = [year, month, day, hour];
			return dVal;
		},
		initData() {
			let startDate, endDate, startYear, endYear, startMonth, endMonth, startDay, endDay;
			let dates = [],
				hours = [];
			let dVal = [],
				pickVal = [];
			let value = this.value;
			let reg = /-/g;
			let range = {};
			let result = '',
				full = '',
				date,
				hour,
				obj = {};
			let defaultDate = this.getDefaultDate();
			let defaultYear = defaultDate.defaultYear;
			let defaultMonth = defaultDate.defaultMonth;
			let defaultDay = defaultDate.defaultDay;
			let defaultDays = defaultDate.defaultDays;
			let curFlag = this.current;
			let disabledAfter = this.disabledAfter;
			let dateData = [];
			dVal = this.getDval();
			dateData = this.getData(dVal);
			console.log(dateData);
			// this.range=range;
			// this.checkObj=obj;
			// this.$nextTick(()=>{
			// 	this.pickVal=pickVal;
			// });
			// this.$emit("change",{
			// 	result:result,
			// 	value:full,
			// 	obj:obj
			// })
		},
		handlerChange(e) {
			console.log(e);
		}
	}
};
</script>

<style lang="scss" scoped>
.w-picker-flex2 {
	flex: 2;
}
.w-picker-flex1 {
	flex: 1;
}
.w-picker-view {
	width: 100%;
	height: 476upx;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 1);
	z-index: 666;
}
.d-picker-view {
	height: 100%;
}

.w-picker-item {
	text-align: center;
	width: 100%;
	height: 88upx;
	line-height: 88upx;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 30upx;
}
</style>
